<template>
  <view
    class="top"
    ref="top"
    :style="{
      height: navHeight + 'rpx',
    }"
  >
  </view>
  <view
    class="menuButtonheight"
    :style="{ height: menuButtonheight + 'rpx', top: navHeight + 'rpx' }"
  >
  </view>
  <view
    class="topHeader"
    :style="{
      'padding-top': navHeight + menuButtonheight + 60 + 'rpx',
    }"
  >
    <view class="ucenterHeader">
      <image
        :src="
          userInfo?.avatar == '' || userInfo == '' || userInfo == null
            ? 'https://img.zhizhuangtong.com/project_media/img/xcx/avatar.png'
            : userInfo?.avatar
        "
        class="avatar"
      />
      <view class="right" v-if="userInfo?.nickname">
        <text class="label">Hi</text>
        <text class="age">{{ userInfo?.nickname }}</text>
      </view>

      <view class="right" v-else @click="gotoLogin"> 
        <text class=" login">点击登录</text>
      </view>

      <view class="tag">
        <image
          src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"
        />
      </view>

      <!-- <view class="bagImg">
				<image src="../../static/ucenter/bag.png" />
			</view> -->
    </view>

    <view class="cards">
      <view class="label">
        <view class="name"> 我的需求 </view>
        <view class="all" @click="myDemandStatus(0)">
          全部
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"
            class="allIcon"
          />
        </view>
      </view>
      <view class="row">
        <view class="col" @click="myDemandStatus(0)">
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/djd.png"
            class="icon"
          />
          <text>待接单</text>
        </view>

        <view class="col" @click="myDemandStatus(1)">
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/fwz.png"
            class="icon"
          />
          <text>服务中</text>
        </view>

        <view class="col" @click="myDemandStatus(2)">
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/dys.png"
            class="icon"
          />
          <text>待验收</text>
        </view>

        <view class="col" @click="myDemandStatus(3)">
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/ywc.png"
            class="icon"
          />
          <text>已完成</text>
        </view>
      </view>
    </view>

    <view class="cards">
      <view class="label">
        <view class="name"> 我的订单 </view>
        <view class="all" @click="myOrder(0)">
          全部
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png"
            class="allIcon"
          />
        </view>
      </view>
      <view class="row">
        <view class="col" @click="myOrder(2)">
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/dfk.png"
            class="icon"
          />
          <text>待付款</text>
        </view>

        <view class="col" @click="myOrder(4)">
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/dsh.png"
            class="icon"
          />
          <text>待收货</text>
        </view>

        <view class="col" @click="myOrder(5)">
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/ywc.png"
            class="icon"
          />
          <text>已完成</text>
        </view>

        <view class="col" @click="myOrder(1)">
          <image
            src="https://img.zhizhuangtong.com/project_media/img/xcx/ysx.png"
            class="icon"
          />
          <text>已失效</text>
        </view>
      </view>
    </view>

    <!-- <view class="cards menuRow">
			<view class="tagMenu" @click="nullClick">
				<text>支付记录</text>
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" />
			</view>
			<view class="tagMenu" @click="nullClick">
				<text>售后服务</text>
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" />
			</view>
		</view> -->
    <view class="logout-btn" @click="logout" v-if="userInfo"> 退出登录 </view>
  </view>
</template>

<script setup>
import { checkLogin } from "@/utils/auth.js";
import { onReachBottom, onShow, onPullDownRefresh } from "@dcloudio/uni-app";
import { ref, onMounted } from "vue";
import { getUserInfo, loginOut } from "@/api/mine.js";
// 头部的高度
const headHeight = ref("");
// 导航栏的右边距
const navPaddingRight = ref("");
// 导航栏的高度
const navHeight = ref("");
//胶囊高度: "value",
const menuButtonheight = ref("");

// 导航栏距离顶部的距离
const navTop = ref("");

const show = ref(false);
const userInfo = ref();
onShow(() => {
  getInfo();
});

onMounted(() => {
  // 获取胶囊的位置
  const menuButtonObject = uni.getMenuButtonBoundingClientRect();
  const systemInfo = uni.getSystemInfoSync();
  // 获取系统信息
  uni.getSystemInfo({
    success: (res) => {
      // 获取状态栏的高度
      const statusBarHeight = res.statusBarHeight;
      navTop.value = menuButtonObject.top;
      navHeight.value =
        (menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
        menuButtonObject.height +
        systemInfo.statusBarHeight;
      menuButtonheight.value = menuButtonObject.height * 2;
      navPaddingRight.value = (menuButtonObject.width + 6) * 2;
      headHeight.value =
        (menuButtonObject.top - systemInfo.statusBarHeight) * 2 +
        menuButtonObject.height +
        systemInfo.statusBarHeight;
    },
  });
});

//获取用户信息
const getInfo = async () => {
  const res = await getUserInfo();
  console.log(res);
  userInfo.value = res.data.user;
};
// 我的需求
const myDemandStatus = (index) => {
  if (!checkLogin()) {
    return;
  } else {
    uni.navigateTo({
      url: "/pages/demand/demandStatus/index?status=" + index,
    });
  }
};

const myOrder = (index) => {
  if (!checkLogin()) {
    // 在跳转到登录页时
    return;
  } else {
    uni.navigateTo({
      url: "/pages/mineB/mineOrder/mineOrderList/index?status=" + index,
    });
  }
};
const gotoLogin = () => {
  if (!checkLogin()) {
    // 在跳转到登录页时
    return;
  } 
  
};

// 退出登录
const logout = async () => {
  const res = await loginOut();
  userInfo.value = "";
  uni.removeStorageSync("useInfo");
  uni.removeStorageSync("token");
  wx.showToast({
    title: "登录退出成功！",
    icon: "none",
    duration: 2000,
  });
};
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  // background: rgba(254, 172, 94, 0.4);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
}

.menuButtonheight {
  width: 100%;
  position: absolute;
}

.topHeader {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  z-index: 1;
  padding: 30rpx;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  // background: linear-gradient(180deg, rgba(254, 172, 94, 0.7) 10%, #F2F2F2 60%);
  // background-image: url('https://zzt-pub.oss-cn-wuhan-lr.aliyuncs.com/clientImg/minbag.png');
  // background-size: cover;
  // background-position: center;
  // background-color: transparent;

  .ucenterHeader {
    height: 100rpx;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    position: relative;
    z-index: 1;

    .bagImg {
      position: absolute;
      right: 20%;
      z-index: 1;
      top: -30rpx;
      width: 200rpx;
      height: 200rpx;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background: #fff;
      overflow: hidden;
      border: 2rpx solid #fff;
    }

    .right {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      align-content: center;

      text {
        width: 100%;
        padding: 0 25rpx;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        padding-right: 30%;
      }

      .label {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 34rpx;
        color: #2f2f2f;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
      }

      .age {
        margin-top: 20rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 34rpx;
        color: #2f2f2f;
        line-height: 42rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }

    .tag {
      width: 60rpx;
    }
  }

  .cards {
    width: 100%;
    padding: 30rpx 20rpx;
    background: #ffffff;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    border-radius: 20rpx;
    box-sizing: border-box;
    margin-bottom: 25rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 30rpx;
      margin-bottom: 40rpx;
      width: 100%;

      .name {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 30rpx;
        color: #333333;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .all {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 36rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-style: normal;
        text-transform: none;

        image {
          margin-left: 10rpx;
          width: 9rpx;
          height: 15rpx;
        }
      }
    }

    .row {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .col {
        display: flex;
        height: 100rpx;
        flex-wrap: wrap;
        justify-content: center;

        image {
          max-height: 50rpx;
          width: 50rpx;
          margin-bottom: 10rpx;
        }

        text {
          width: 100%;
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
          line-height: 36rpx;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }
}

.menuRow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 !important;
  border-radius: 10rpx;

  .tagMenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    width: 100%;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    text {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 50%;
    }

    image {
      width: 14rpx;
      height: 25rpx;
    }
  }
}

.conterScroll {
  // position: absolute;
  // top: 410rpx;
  // border-radius: 2em 2em 0 0;
  // padding-top: 414rpx;
  // z-index: 1;
  width: 100%;
  // min-height: calc(100vh - 414rpx);
  // overflow-y: auto;
  // background: #ffffff;
}

// 添加退出按钮样式
.logout-btn {
  width: 100%;
  height: 90rpx;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  color: #F2270C;
  z-index: 10;
}
.login{
  font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500!important;
font-size: 36rpx !important;
color: #333333!important;
}
</style>
